<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>JackLin的博客</title>

    <!--    标签栏图标   -->
    <link rel="shortcut icon" href="/image/logo.png" type="image/x-icon">

    <!--     “时间轴” css 代码文件 -->
    <link rel="stylesheet" th:href="@{/timeline/css/history.css}">
    <!--    引入导航栏的 css 代码文件 -->
    <link rel="stylesheet" th:href="@{/css/article-title.css}">
    <!--    滑动到顶部火箭 -->
    <link rel="stylesheet" type="text/css" th:href="@{/css/rocketTop.css}">
    <!--    关于底部备案号的 css 样式文件   -->
    <link rel="stylesheet" th:href="@{/css/blog-footer.css}">


    <!--    字体图标    -->
    <script src="http://at.alicdn.com/t/font_1697913_qro0wpzn1zo.js"></script>
    <!--    引入 JQuery-->
    <script th:src="@{/js/jquery-3.4.1.js}"></script>
    <!--    引入平滑滚动的 js-->
    <script th:src="@{/js/jquery.scrollTo.js}"></script>
    <!--    引入滚动监测的 js-->
    <script th:src="@{/js/jquery.waypoints.js}"></script>
    <!--    滑动到顶部 js -->
    <script type="text/javascript" th:src="@{/js/rocketTop.js}"></script>


    <style>
        body {
            background-image: url("/image/bc.png");
        }

        /**************************************     时间轴  --->             *******************/
        .head-warp {
            margin-top: 90px;
        }

        dl a {
            background: linear-gradient(to right, #fa709a 0%, #fee140 100%);
            -webkit-background-clip: text;
            color: transparent;
        }

        .cur {
            font-size: 26px !important;
        }

        .main {
            border: 1px solid #d7acac;
            box-shadow: 2px 2px 2px #d6cff8;
            border-radius: 5px 5px 5px 5px;
        }

        /************************************       底部导航栏       ***************8*/
        /*    将 css 代码抽取出来了，放在 blog-footer.css   中 */

    </style>

</head>
<body>


<!--    头部导航栏-->
<div th:replace="~{common/commonsfile::article-topbar}"></div>

<!-- 时间轴 开始 -->
<div class="head-warp">
    <div class="head">
        <div class="nav-box">
            <ul>
                <li class="cur" style="text-align:center; font-size:62px; font-family:'微软雅黑', '宋体'">JackLin博客时间轴</li>
            </ul>
        </div>
    </div>
</div>
<div class="main">
    <div class="history">

        <div class="history-date" th:each="itemWithCount:${listWithCount}">
            <ul>
                <h2 class="first">
                    <a href="#"
                       th:text="${itemWithCount.get('year')} + '年' + ${itemWithCount.get('month')} + '月' + '(' + ${itemWithCount.get('count')} + ')'"></a>
                </h2>

                <!--   关键代码（这个 if 判断是关键）：查询1和查询2比较，要求月份和年份相同，这将这条记录展示出来     -->
                <li class="green" th:each="itemWithOutCount:${listWithOutCount}"
                    th:if="${itemWithOutCount.get('year')} == ${itemWithCount.get('year')} and ${itemWithOutCount.get('month')} == ${itemWithCount.get('month')}">
                    <h3>
                        [[ ${itemWithOutCount.get('month')} + '月' + ${#dates.day(itemWithOutCount.get('time')) + '日'} ]]
                        <span th:text="${#dates.hour(itemWithOutCount.get('time'))} + '时' + ${#dates.minute(itemWithOutCount.get('time')) + '分'}"></span>
                    </h3>
                    <dl>
                        <dt>
                            <a th:href="@{/article/} + ${itemWithOutCount.get('bid')}"
                               th:text="${itemWithOutCount.get('title')}" target="_blank"></a>
                        </dt>
                    </dl>
                </li>
            </ul>
        </div>

    </div>
</div>

<!--    文章底部-->
<div th:replace="~{common/commonsfile::blog-footerbar}"></div>

<!--    滑动顶部小火箭 -->
<div id="shape">
    <div class="shapeColor">
        <div class="shapeFly">
        </div>
    </div>
</div>


<!--    时间轴的 JS 代码-->
<script th:src="@{/timeline/js/main.js}"></script>
<!--    关于时间统计的 JS 代码-->
<script th:src="@{/js/time.js}"></script>
<!--    关于动态背景线条的 JS 代码-->
<script color="255,69,0" opacity='1' zIndex="1" count="600" th:src="@{/js/canvas-nest.js}"
        type="text/javascript"></script>

<script>
    // 滚到顶部按钮
    $("#btn-up").click(function () {
        $(window).scrollTo(0, 700);
    });

    // 滚动监测
    var waypoint = new Waypoint({
        element: document.getElementById('content-left'),
        handler: function (direction) {
            if (direction === 'down') {
                console.log('down');
                $("#btn-up").show(400);
            } else if (direction === 'up') {
                console.log('up');
                $("#btn-up").hide(400);
            }
        }
    })


</script>


</body>
</html>